<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%
           String path = request.getContextPath();
           String basePath =request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
		%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>我的订单</title>
<base href="<%= basePath%>">
<link rel="icon" href="static/img/b2c_favicon.ico" type="image/x-icon"/>
  <link href="static/css/dingdan.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="box">
<div id="test"></div>
<div id="zhuce">
					<div class="zhuce-title">
							<h1>欢迎注册联想会员</h1>
    						<div onclick="guan()" class="close"></div>
    				</div>
    				<div class="zhuce-input">
    					<p><lable>账号</lable><input class="account" placeholder="请输入手机号"/></p>
    				</div>
    				<div class="enroll_inputaa ">
    					<p>请输入正确的格式</p>
    				</div>
    				<div class="enroll_inputb">
    					<p><lable>密码</lable><input type="password" class="account" placeholder="密码长度8~20位,数字、字母、字符至少包含两种"/></p>
    				</div>
    				<div class="enroll_inputbb ">
    					<p>请输入正确的格式</p>
    				</div>
    				<div class="enroll_inputc">
    					<p><lable>确认密码</lable><input type="password"class="account" ></p>
    				</div>
    				<div class="enroll_inputaa errorRepwd">
    					<p class="error">确认密码和密码不一致，请重新输入</p>
    				</div>
    				<div class="enroll_inputd">
    					<p><lable>验证码</lable><input type="text" class="captcha_code"></p><img src="" class="yanzhengma"/><span class="huan">换一张</span>
    				</div>
    				<div class="enroll_inputaa">
    					<p>验证码格式错误</p>
    				</div>
    				  <div class="enroll_inputd">
    					<p><lable>手机验证码</lable><input type="text" class="captcha_code"></p><button class="mobile_captcha" style="margin-left:3px;width: 120px; background: #c2c2c2;border: none;height: 28px;cursor: poiner;">获取手机验证码</button>
    				</div>
    				<div class="enroll_inputaa"></div>
    				<div class="enroll_main">
    					<lable>
    						<input type="checkbox" class="chk"/>
    						<p>同意联想的<a>使用条款</a>和<a>隐私权政策</a></p>	
    					</lable>
    				</div>
    				<div class="enroll_btn">
    						<a>立即注册</a>
    				</div>
				</div>

<div id="denglu">
					<div class="login">
						<div class="now">普通登录</div>
						<div class="nows">快捷登录</div>
						<div onclick="cancel_shield()" class="close"></div>
					</div>
					<div class="login-input">
						<div class="use">
							<img src="static/img/icon03.jpg" class="input-img"/>
							<input type="text" name="" class="name1" placeholder="请输入手机号或邮箱"/>
						</div>
					</div>
					<div class="login-inputb">
						<div class="pwd">
							<img src="static/img/icon04.jpg" class="input-img"/>
							<input type="password" name="" class="name1" placeholder="密码"/>
						</div>
					</div>

					<div class="login-main">

					</div>
					<div class="zidong">
						<input type="checkbox" name="" class="persistent"><p>自动登录</p>
					</div>
					<div class="login-btn">
						<a>登录</a>
					</div>
					<div class="login-zhu">
						<p>
							<a class="zhuc" onclick="zhu()">立即注册</a>
							<a class="mima">忘记密码</a>
						</p>
					</div>
					<div class="cooperation">
						使用合作网站账号登录:
						<div class="cooperation_items">
							<a>
								<img src="static/img/ico_qq.png"/>
								<img src="static/img/ico_wc.png"/>
								<img src="static/img/ico_sina.png"/>
								<img src="static/img/ico_zfb.png"/>
							</a>
						</div>
					</div>

			</div>

<div class="top-box">
				<img src="static/img/0d66fb8c-f7b0-4d2c-888c-51d56f67aeab_1.jpg" class="top-img"/>
				<ul class="ulone">
					<li>联想首页</li>
					<li>商城</li>
					<li>社区</li>
					<li>服务</li>
					<li>资讯</li>
					<li>门店</li>
					<li class="topimg">手机版<span class="ii"></span></li>
				</ul>
				<div class="qq"><img src="static/img/mmqrcode1515487661338.png"/></div>
		</div>
		<div class="two-box">
			<ul class="ultwo">
				<li>联想合伙人</li>
				<li>私人订制</li>
				<li>急速达</li>
				<li>积分兑换</li>
				<li>小新店铺</li>
				<li>学生专区</li>
				<li>商用专区</li>
			</ul>
			<div class="find">
				<input type="text" name="" placeholder="智能头盔" class="input-one">
				<span class="find-box"><span class="find-img"></span></span>
			</div>
			<div class="shop-img"></div>
			<div class="Personal-img" onclick="shield()"></div>
		</div>
</div>
<div style="margin:0px auto">
<div class="box1">
<a>首页</a>
>
<a href="jsps/geernzhongxin.jsp?index=0">会员中心</a>
>
<a>个人信息</a>
</div>
<jsp:include page="/jsps/geren-left.jsp">
	<jsp:param value="2" name="index"/>
</jsp:include>
<div class="gr" style="border: 1px solid #d9d8d6;heigth:500px;">
<div class="dd">
<a class="sy" id="4">所有订单</a>
<a class="dai" id="1">待付款</a>
<a class="dai" id="2">待发货</a>
<a class="dai" id="3">待收货</a>
</div>
<div class="imgs1" style="height: 735px">
	<jsp:include page="/jsps/sydd.jsp">
		<jsp:param value="" name=""/>
	</jsp:include>
</div>
</div>
</div>
 </body>
</html>
<script type="text/javascript" src="static/js/jquery-3.1.0.js"></script>
<script src="static/js/area.js"></script>
<script src="static/js/jquery-1.11.3.min.js"></script>
<script src="static/js/select.js"></script>
<script>
$(function(){
	$('input[name=image]').change(function(){
		$('form').submit();
	});
	
	$("#1").click(function(){	
		$(".imgs1").empty();
		$("#1").css("background","#fff");
		$("#1").css("border-right;","1px solid #d9d8d6");
		$("#1").css("color","#e2231a");
		$("#1").css("cursor","pointer");
		$("#1").css("border-left","1px solid #d9d8d6");
		$("#1").css("border-bottom","1px solid #fff");
		$("#4").css("border-bottom","1px solid #d9d8d6");
		$("#4").css("background","#eee");
		$("#4").css("color","#000");
		$("#3").css("border-bottom","1px solid #d9d8d6");
		$("#3").css("background","#eee");
		$("#3").css("color","#000");
		$("#2").css("border-bottom","1px solid #d9d8d6");
		$("#2").css("background","#eee");
		$("#2").css("color","#000");
		$(".imgs1").load("dfkServlet");  
	});

	$("#2").click(function(){
	$(".imgs1").empty();
	$("#2").css("background","#fff");
	$("#2").css("border-right;","1px solid #d9d8d6");
	$("#2").css("color","#e2231a");
	$("#2").css("cursor","pointer");
	$("#2").css("border-left","1px solid #d9d8d6");
	$("#2").css("border-bottom","1px solid #fff");
	$("#4").css("border-bottom","1px solid #d9d8d6");
	$("#4").css("background","#eee");
	$("#4").css("color","#000");
	$("#3").css("border-bottom","1px solid #d9d8d6");
	$("#3").css("background","#eee");
	$("#3").css("color","#000");
	$("#1").css("border-bottom","1px solid #d9d8d6");
	$("#1").css("background","#eee");
	$("#1").css("color","#000");
	$(".imgs1").load("dfhServlet")  ; 
	});

	$("#3").click(function(){ 
	$(".imgs1").empty();
	$("#3").css("background","#fff");
	$("#3").css("border-right;","1px solid #d9d8d6");
	$("#3").css("color","#e2231a");
	$("#3").css("cursor","pointer");
	$("#3").css("border-left","1px solid #d9d8d6");
	$("#3").css("border-bottom","1px solid #fff");
	$("#4").css("border-bottom","1px solid #d9d8d6");
	$("#4").css("background","#eee");
	$("#4").css("color","#000");
	$("#1").css("border-bottom","1px solid #d9d8d6");
	$("#1").css("background","#eee");
	$("#1").css("color","#000");
	$("#2").css("border-bottom","1px solid #d9d8d6");
	$("#2").css("background","#eee");
	$("#2").css("color","#000");
	$(".imgs1").load("dshServlet");   
	});
	$("#4").click(function(){
		$(".imgs1").empty();
		$("#4").css("background","#fff");
		$("#4").css("border-right;","1px solid #d9d8d6");
		$("#4").css("color","#e2231a");
		$("#4").css("border-left","1px solid #d9d8d6");
		$("#4").css("border-bottom","1px solid #fff");
		$("#4").css("cursor","pointer");
		$("#3").css("border-bottom","1px solid #d9d8d6");
		$("#3").css("background","#eee");
		$("#3").css("color","#000");
		$("#2").css("border-bottom","1px solid #d9d8d6");
		$("#2").css("background","#eee");
		$("#2").css("color","#000");
		$("#1").css("border-bottom","1px solid #d9d8d6");
		$("#1").css("background","#eee");
		$("#1").css("color","#000");
		$(".imgs1").load("jsps/sydd.jsp");  
	});
	
});
	
 //顶部图片下拉
	$('.ii').hover(
	function(){
		$('.qq img').slideToggle();
	});

function shield(){
    var s = document.getElementById("test");
    s.style.display = "block";
    var l = document.getElementById("denglu");
    l.style.display = "block";
}
function cancel_shield(){
    var s = document.getElementById("denglu");
    s.style.display = "none";
    
    var l = document.getElementById("test");
    l.style.display = "none";
}
function zhu(){
    var z = document.getElementById("zhuce");
    z.style.display="block";
    var l = document.getElementById("test");
    l.style.display = "block";
    var s = document.getElementById("denglu");
    s.style.display = "none";
}
function guan(){
    var q = document.getElementById("zhuce");
    q.style.display="none";
    var l = document.getElementById("test");
    l.style.display = "none";
}

</script>